import { observer } from "mobx-react";
import React, { useEffect, useState } from "react";
import { List, Row, Button, Dialog, Input } from "tdesign-react";
import messageStore from "../../store/MessageStore";
import "./index.less";

function Home() {
  const [roomId, setRoomId] = useState("");
  const [show, setShow] = useState(false);
  const joinRoom = () => {
    setShow(true);
  };

  const confirmJoinRoom = () => {
    window.postMessage({
      type: "joinRoom",
      data: roomId,
    }, "*");
    setShow(false);
    setRoomId('');
  };

  useEffect(() => {}, []);

  return (
    <div className="create-link">
      <Row justify="space-between">
        <h2>创建连接</h2>
        <Button onClick={joinRoom}>加入房间</Button>
      </Row>
      <List size="small" layout="vertical" split>
        {messageStore.localNetRoomList?.map((item, index) => (
          <List.ListItem key={index}>
            <List.ListItemMeta
              title={item.room}
              description={item.count}
              image="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F5563f052-0f0b-475a-b14f-eea08dc82117%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1709001190&t=7ba3189f16b4ab83b45a6512e5867c9d"
            />
          </List.ListItem>
        ))}
      </List>
      <Dialog
        visible={show}
        onClose={() => setShow(false)}
        onCancel={() => setShow(false)}
        onConfirm={confirmJoinRoom}
        header="创建/加入房间"
      >
        <Input placeholder="请输入房间ID" onChange={setRoomId} />
      </Dialog>
    </div>
  );
}

export default observer(Home);
